<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meat name="viewpoet" content="with=device-width, initial-scale=1.0">
        <title>Document</title>
</head>

<body>
    <div id="app">
        <h3>小黑学习网</h3>
        姓名：
        <input type="text" v-model="username">
        <br><br>
        是否单身：
        <input type="checkbox" v-model="isSingle">
        <br><br>
        <!-- 
        前置理解:
            1. name: 给单选框加上name 属性可以分组 → 同一组互相会互斥
            2. value: 给单选框加上 value 属性，用于提交给后台的数据
        结合 Vue 使用 → v-model
    -->
        性别：
        <!-- 单选框（只能选一个的话） 将name设为相同的值 -->
        <input v-model="gender" type="radio" name="gender" value="1">男
        <input v-model="gender" type="radio" name="gender" value="0">女
        <br><br>
        所在城市：
        <select v-model="cityId">
            <option value="101">北京</option>
            <option value="102">上海</option>
            <option value="103">成都</option>
            <option value="104">南京</option>
        </select>
        <br><br>
        自我描述：
        <textarea v-model="desc"></textarea>
        <button>立即注册</button>
    </div>
    <!-- 引入的是开发版本包 - 包含完整的注释和警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                username: '',
                isSingle: true,
                gender: "1",
                cityId: '102',
                desc: ""
            }
        })
    </script>

</body>

</html>